<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>指令缩写</title>
</head>

<body>
    <div id="app">
        <!-- 完整语法 -->
        <a v-bind:href="url">完整语法</a>
        <!-- 缩写 -->
        <a :href="url">缩写</a>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <a :[key]="url">动态参数</a>

        <!-- 完整语法 -->
        <button v-on:click="doSomething">完整语法</button>
        <!-- 缩写 -->
        <button @click="doSomething">缩写</button>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <button @[event]="doSomething">动态参数</button>
    </div>

    <script type="module">
        import Vue from '../vue.esm.browser.js'

        const app = new Vue({
            el: '#app',
            data: {
                url: 'https://cn.vuejs.org/',
                key: 'href',
                event: 'click',
            },
            methods: {
                doSomething() {
                    alert('弹出警告')
                }
            }
        })
    </script>
</body>

</html>